﻿@page "/chart/Category-axis"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Charts
@using PointRender

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the rendering of the category axis in the chart, with details about internet users across different countries.</p>
</SampleDescription>
<ActionDescription>
    <p>You can use the category axis to represent the string values instead of the numbers in the chart. To render category axis, set <code>ValueType</code> in axis to <code>Category</code>.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the category axis can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/category-axis'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Internet Users – 2016" Theme="@Theme">
        <ChartArea>
            <ChartAreaBorder Width="0"></ChartAreaBorder>
        </ChartArea>
        <ChartPrimaryXAxis Title="Country" EnableTrim="false" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Minimum="0" Maximum="800" LabelFormat="{value}M" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisLabelStyle Color="transparent"></ChartAxisLabelStyle>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true" Format="${point.tooltip}"></ChartTooltipSettings>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" TooltipMappingName="TooltipMappingName" Name="Users" XName="Country" YName="Users" Width="2" Type="ChartSeriesType.Bar">
                <ChartMarker>
                    <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                        <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartEvents OnPointRender="PointRender"></ChartEvents>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<CategoryData> ChartPoints { get; set; } = new List<CategoryData>
    {
        new CategoryData { Country = "Germany", Users = 72, TooltipMappingName = "GER: 72" },
        new CategoryData { Country = "Russia", Users = 103.1, TooltipMappingName = "RUS: 103.1" },
        new CategoryData { Country = "Brazil", Users = 139.1, TooltipMappingName = "BRZ: 139.1" },
        new CategoryData { Country = "India", Users = 462.1, TooltipMappingName = "IND: 462.1" },
        new CategoryData { Country = "China", Users = 721.4, TooltipMappingName = "CHN: 721.4" },
        new CategoryData { Country = "United States<br>Of America", Users = 286.9, TooltipMappingName = "USA: 286.9" },
        new CategoryData { Country = "Great Britain", Users = 115.1, TooltipMappingName = "GBR: 115.1" },
        new CategoryData { Country = "Nigeria", Users = 97.2, TooltipMappingName = "NGR: 97.2" }
     };

    protected override void OnInitialized()
    {
        this.SetTheme(null);
    }

    public void PointRender(PointRenderEventArgs args)
    {
        this.SetTheme(args);
    }

    private void SetTheme(PointRenderEventArgs args)
    {
        if (NavigationManager.Uri.IndexOf("material") > -1)
        {
            if (args == null)
                Theme = Theme.Material;
            else
                args.Fill = PointColor.MaterialColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("fabric") > -1)
        {
            if (args == null)
                Theme = Theme.Fabric;
            else
                args.Fill = PointColor.FabricColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("bootstrap") > -1)
        {
            if (args == null)
                Theme = Theme.Bootstrap;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("highcontrast") > -1)
        {
            if (args == null)
                Theme = Theme.HighContrast;
            else
                args.Fill = PointColor.HighContrastColors[args.Point.Index % 10];
        }
        else
        {
            if (args == null)
                Theme = Theme.Bootstrap4;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
    }

    public class CategoryData
    {
        public string Country { get; set; }
        public double Users { get; set; }
        public string TooltipMappingName { get; set; }
    }
}
